<template>
  <view class="counter">
    <up-icon
      v-if="number > 0"
      :name="reduceIcon"
      size="28"
      color="#8E8E8E"
      @click="reduceClick"
    ></up-icon>
    <input
      class="count_input"
      v-if="number > 0"
      type="number"
      :value="number"
      @blur="inputBlurEvent"
      @input="inputChangeEvent"
      :disabled="disabled"
    />
    <up-icon
      :name="plusIcon"
      size="28"
      color="#ff3232"
      @click="addClick"
      :customStyle="iconStyle"
    ></up-icon>
  </view>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  const props = defineProps({
    id: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    number: {
      type: Number,
      default: 0,
    },
    maxNumber: {
      type: Number,
      default: 99999,
    },
    minNumber: {
      type: Number,
      default: 0,
    },
    progressValue: {
      type: Number,
      default: 1,
    },
    reduceIcon: {
      type: String,
      default: 'minus-circle',
    },
    plusIcon: {
      type: String,
      default: 'plus-circle-fill',
    },
  });
  const iconStyle = reactive({
    fontWeight: 'blod',
  });
  const emit = defineEmits(['change-click']);
  // 加
  function addClick(ev) {
    emit('change-click', props.number + props.progressValue); // 当前值 + 进步值
  }
  // 减
  function reduceClick() {
    if (props.number <= props.minNumber) {
      return;
    }
    if (props.number - props.progressValue < props.minNumber) {
      return;
    }
    // 3、执行 减操作
    emit('change-click', props.number - props.progressValue);
  }

  function inputBlurEvent(e) {
    let number = parseInt(e.detail.value);
    if (isNaN(number) || number === 0) {
      emit('change-click', 0);
      return;
    }

    // 条件：输入数不为进步值的倍数，则往前取成倍数值
    let multipie = Math.ceil(number / props.progressValue); // 获取倍数
    number = multipie * props.progressValue; // 向上获取最近的倍数
    if (number > props.maxNumber) {
      number = props.maxNumber;
      emit('change-click', number);
    } else if (number <= props.minNumber) {
      emit('change-click', props.minNumber);
    } else {
      emit('change-click', number);
    }
  }

  function inputChangeEvent(e) {
    // 限制输入在最大与最小值之间
    // 注意：因为都是赋值最大或最小值，所以会出现值复用无法重新渲染页面的情况（第一次能重新渲染，之后的都不渲染）：已解决
    let number = parseInt(e.detail.value);
    if (isNaN(number) || number === 0) {
      // 为空为0
      return;
    }
    if (number > props.maxNumber) {
      emit('change-click', props.maxNumber);
    } else if (number <= props.minNumber) {
      emit('change-click', props.minNumber);
    } else {
      emit('change-click', number);
    }
  }
</script>

<style lang="scss">
  @import './styles/counter.scss';
</style>
